import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

/**
 * @method LineStackChart
 * @prop {String} width  宽度 px||%
 * @prop {String} height 高度 px||%
 * @prop {String} id 指定id,默认为line
 * @prop {Array} dataSource  展示数据
 * @prop {Array} legend
 * @prop {String} xAxisKey    坐标key
 * @prop {String} dataKey    数据key
 * @prop {Array} yAxis    非必填，y轴，如果存在yAxis，则不会用yAxis默认的配置
 * @prop {String} yAxisKey    非必填，y轴的key值，用于区分多个y轴时，数据的yAxisIndex，
 * @prop {Function} xRender    渲染x轴的方法，返回字符串，如果传入这个参数，则会覆盖掉xAxisKey的取值,默认null
 * @prop {Function} dataRender 渲染数据的方法，返回字符串，如果传入这个参数，则会覆盖掉dataKey的取值,默认null
 * @prop {Function} dataFormatter 数据的format 如 '{value} %'
 * @prop {Function} tooltipFormatter 数据值tooltip的format 如 '{c} %'
 */

// 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

// 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

// 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

// 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

// 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

export default function LineStackChart({
  width = 1000,
  height = 500,
  dataSource,
  id = 'line',
  legend,
  xAxisKey,
  dataKey,
  xRender = null,
  dataRender = null,
  dataFormatter = undefined,
  tooltipFormatter = undefined,
  yAxis = undefined,
  isDd = false,
  yAxisKey = undefined,
  legendSetting = {},
  colors,
  colorOptions = [
    '#c23531',
    '#2f4554',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3',
  ],
}) {
  const chart = useRef(null);

  useEffect(() => {
    if (dataSource.length > 0) {
      const xAxis =
        dataSource &&
        dataSource[0] &&
        dataSource[0] &&
        dataSource[0].value &&
        dataSource[0].value.map((item) => (xRender ? xRender(item) : item[xAxisKey]));
      const _series = dataSource.map((it) => {
        const item = {
          name: it.name,
          type: 'line',
          stack: isDd ? '总量' : it.name,
          data: it.value && it.value.map((it) => (dataRender ? dataRender(it) : it[dataKey])),
        };
        if (it.itemStyle) {
          item.itemStyle = it.itemStyle;
        }
        //如果有多根y轴，
        if (yAxis && yAxis.length > 1) {
          let i = yAxis.findIndex((item) => item.key === it[yAxisKey]);
          if (i !== -1) {
            item.yAxisIndex = i;
          }
        }
        return item;
      });
      const valueFormatter = dataFormatter
        ? {
            formatter: dataFormatter,
          }
        : {};
      const tipFormatter = tooltipFormatter
        ? {
            formatter: tooltipFormatter,
          }
        : {};
      chart.current = echarts.init(document.getElementById(id));
      chart.current.setOption({
        color: colorOptions,
        grid: {
          // top: '20%', //距上边距
          // left: '1%', //距离左边距
          // right: '0%', //距离右边距
          // bottom: '10%', //距离下边距
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          ...tipFormatter,
          axisPointer: {
            lineStyle: {
              color: colors ? colors[1] : '#555',
            },
          },
          textStyle: {
            color: colors ? colors[2] : '#fff',
          },
        },
        legend: {
          data: legend,
          padding: [20, 0, 0, 0],
          ...legendSetting,
          textStyle: {
            color: colors ? colors[0] : '#333',
          },
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLabel: {
            textStyle: {
              color: colors ? colors[0] : '#333',
            },
          },
          axisLine: {
            lineStyle: {
              color: colors ? colors[1] : '#333',
            },
          },

          // axisLabel: {
          //   rotate: 40,
          // },
        },
        yAxis:
          yAxis && yAxis.length > 1
            ? yAxis
            : {
                type: 'value',
                axisLabel: {
                  ...valueFormatter,
                  textStyle: {
                    color: colors ? colors[0] : '#333',
                  },
                },
                axisTick: {
                  inside: true,
                },
                scale: true,
                splitLine: {
                  lineStyle: {
                    color: colors ? colors[1] : ['#555'],
                    width: 1,
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: colors ? colors[0] : '#333',
                  },
                },
              },
        series: _series,
      });
    }
  }, [dataSource]);

  useEffect(() => {
    window.addEventListener('resize', () => {
      chart.current && chart.current.resize();
    });
    return () => {
      window.removeEventListener('resize', () => {
        chart.current && chart.current.resize();
      });
    };
  }, []);

  return <div id={id} style={{ width: width, height: height }} />;
}
